<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-switch
          v-for="v of list"
          :key="v.name"
          v-model="v.status"
          :active-text="v.name"
        >
        </el-switch>
      </div>
    </el-col>
    <el-col :span="18">
      <div class="charts-contrainer">
        <v-chart :options="polar" autoresize />
      </div>
    </el-col>
  </el-row>
</template>

<script>
import v from './v'

export default {
  data() {
    var colors = ['#5793f3', '#d14a61', '#675bba']

    return {
      list: [
        {
          name: '1111',
          status: false,
        },
      ],
      polar: {
        color: colors,

        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross',
          },
        },
        legend: {
          data: [],
        },
        grid: {
          top: 70,
          //   bottom: 50,
        },
        xAxis: {
          type: 'time',
          splitLine: {
            // show: false,
          },
        },
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [],
      },
    }
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    list: {
      handler: function(newlist) {
        console.log('watch...', newlist)
      },
      deep: true,
    }
  },
  created() {
    this.flush()
  },
  mounted() {
    // console.log(v.code)
    console.log('monuted')
  },
  methods: {
    flush: function() {
      let machines = ['一号机', '二号机', '三号机']

      for (const mac of machines) {
        let data = []
        for (const time of v.data) {
          const seed = Math.random() * 100
          data.push({
            name: time.timestamp,
            value: [
              time.timestamp,
              parseFloat((time.uploadspeed / 1000 / 1000 + seed).toFixed(2)),
            ],
          })
        }
        this.polar.series.push({
          name: mac,
          type: 'line',
          showSymbol: false,
          hoverAnimation: false,
          smooth: true,
          data: data,
        })
      }

      this.polar.legend.data = machines
    },
  },
}
</script>

<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.charts-contrainer {
  margin: 15px;
  height: 90vh;
  width: 100vw;
  background-color: white;
}
.charts-contrainer .echarts {
  width: 100%;
  height: 100%;
}
</style>
